<template>
	<movable-area class="movable-area">
		<movable-view class="movable-view" :x="x" :y="y" direction="all" @change="onChange"
			:style="{ 'width':width, 'height':width }">
			<button class="float-botton" @click="handleClick"
				:style="{'background': bgColor, 'color':textColor, 'fontSize':fontSize,'width':width, 'height':width, 'line-height':width,'box-shadow': boxShadow }">
				{{ label }}
			</button>
		</movable-view>
	</movable-area>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';

	const props = defineProps({
		label: {
			type: String,
			default: '+',
		},
		bgColor: {
			type: String,
			default: '#07c160',
		},
		boxShadow: {
			type: String,
			default: '0 0 20rpx rgba(7, 193, 96, 0.4)',
		},
		textColor: {
			type: String,
			default: '#ffffff',
		},
		width: {
			type: String,
			default: '140rpx',
		},
		fontSize: {
			type: String,
			default: '36rpx',
		},
		initX: {
			type: Number,
			default: 3000,
		},
		initY: {
			type: Number,
			default: 3000,
		}
	});

	const emit = defineEmits(['click']);

	// 不在可移动范围内，会自动移动到可移动范围. 所以会在右下角
	const x = ref(props.initX);
	const y = ref(props.initY);

	const onChange = (e) => {
		x.value = e.detail.x;
		y.value = e.detail.y;
	};

	const handleClick = () => {
		emit('click');
	};
</script>

<style scoped>
	.movable-area {
		position: fixed;
		top: 20rpx;
		left: 20rpx;
		width: calc(100% - 40rpx);
		height: calc(100% - 40rpx);
		pointer-events: none;
	}

	.movable-view {
		pointer-events: auto;
	}

	.float-botton {
		padding: 0;
		text-align: center;
		border-radius: 50%;
	}
</style>